import { defineComponent, reactive, onMounted } from 'vue'
import Draw from './draw'

export default defineComponent({
  components: {
    Draw
  },
  setup() {
    const cdata = reactive({
      gaugeData: [
        {
          value: 20,
          detail: {
            valueAnimation: true,
            offsetCenter: ['0%', '-40%']
          }
        },
        {
          value: 40,
          detail: {
            valueAnimation: true,
            offsetCenter: ['0%', '0%']
          }
        },
        {
          value: 60,
          detail: {
            valueAnimation: true,
            offsetCenter: ['0%', '40%']
          }
        }
      ],
      
      rateData: []
    })

    const resetData = (val:any) => {
      cdata.gaugeData[0].value = val==0?20:70
      cdata.gaugeData[1].value = val==0?40:50
      cdata.gaugeData[2].value = val==0?60:30
    }

    // methods
    const setData = () => {
      for (let i = 0; i < cdata.gaugeData.length - 1; i++) {
        cdata.rateData.push(i);
      }
    }

    // 生命周期
    onMounted(() => {
      setData()
    })

    return {
      cdata,
      resetData 
    }
  },
  render(){
    return <div>
      <Draw cdata={this.cdata} />
    </div>
  }
})